<template>
  <div class="map_wrapper">
    <div id="map" class="map" />
  </div>
</template>

<script>
import mapinit from '@/utils/map-init.js'
export default {
  name: 'FarmMap',
  props: {
    latLng: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      zoom: '15',
      T: null,
      map: null,
      polygon: null,
      first: true
    }
  },
  watch: {
    latLng: {
      handler(newValue) {
        if (this.first) {
          this.initMap()
          this.first = false
        } else {
          this.refresh(newValue)
        }
      },
      immediate: true
    }
  },
  methods: {
    initMap() {
      mapinit.init().then(T => {
        const map = new T.Map('map', {
          minZoom: 4
        })
        // map.disableDoubleClickZoom()
        map.setMapType(TMAP_HYBRID_MAP)// 设置卫星路网复合地图
        const lngLat = new T.LngLat(this.latLng[1], this.latLng[0])
        const marker = new T.Marker(lngLat)
        map.addOverLay(marker)
        map.centerAndZoom(lngLat, this.zoom)
        this.map = map
        this.T = T
      })
    },
    refresh(latLng) {
      const map = this.map
      const T = this.T
      map.clearOverLays()
      const lngLat = new T.LngLat(latLng[1], latLng[0])
      const marker = new T.Marker(lngLat)
      map.addOverLay(marker)
      map.centerAndZoom(lngLat, this.zoom)
    }
  }
}
</script>

<style scoped>
.map_wrapper {
  width:100%;
  height:300px;
  margin-top:20px;
}

.map {
  width: 100%;
  height: 300px;
  border-radius:5px;
}

.map >>> .tdt-control-copyright {
  display: none;
}

</style>
